<template>
	<view :class="config.style">
		<view class="evaluate" v-if="evaluate.total">
			<view class="header">
				<view class="mainstring"></view>
				<view class="title">
					评价
				</view>
				<view class="more" @click="goToMoreEvaluate()">
					查看全部
				</view>
				<view class="action">
						<uni-icons type="arrowright" size="14" color="#000"></uni-icons> 
				</view>
			</view>
			
			<view class="list">
				<view class="item" v-for="(item,index) in evaluate.data" :key="index">
					<view class="Portraits">
						<view class="avatar">
						<image :src="item.user_info.avatar" mode="widthFix"></image>
					</view>
					<view class="star">
							<EvaluateStar />
					</view>
					</view>
					
					<view class="info">
						<view class="nickname">
							{{item.user_info.nickname}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
						<view class="images" v-if="item.images.length > 0">
							<view v-for="(images_item,images_index) in item.images" :key="images_index" class="image">
								<image @click="preview(index,item.images)" :src="images_item.thumb"></image>
							</view>
						</view>
						
						<view class="time">
							{{item.create_time_str}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import EvaluateStar from '../../../components/muu-evaluate-star/muu-evaluate-star.vue'
	export default {
		name: 'Evaluate',
		props:{
			type: {
				type: String,
				default: 'goods'
			},
			typeId: {
				type: Number,
				default: 0
			},
			config: {
				type: Object,
				default: ''
			},
		},
		components: {
			EvaluateStar,
		},
		data() {
			return {
				evaluate: {}
			}
		},
		created() {
			this.getEvaluate()
		},
		methods: {
			/**
			 * 获取评价列表2条
			 */
			getEvaluate: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'list'
					data.type_id = this.typeId
					data.type = this.type
					data.rows = 2
				//获取评价列表数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/evaluate'
					//#endif
					//#ifdef H5
					url = 'entry/site/evaluate'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							//console.log(res.data.data)
							that.evaluate = res.data.data
						}
					}
				})
			},
			/**
			 * 路由至更多评价列表
			 * @param {Object} type
			 * @param {Object} type_id
			 */
			goToMoreEvaluate: function(){
				let type_id = this.typeId
				let type = this.type
				let urlParams = 'type_id='+type_id+'&type='+type
				let url = '../evaluate/list?' + urlParams
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			//预览
			preview: function(index, urls) {
				//console.log(index)
				//console.log(urls)
				let image_arr = []
				urls.forEach(function(item,index){
					console.log(item)
					image_arr.push(item.preview)
				})
				uni.previewImage({
					urls: image_arr,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.evaluate {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 14rpx;
		.header {
			display: flex;
			.mainstring{
				width: 8rpx;
				height:27rpx ;
				background-color: #0dafcc;
				border-radius: 4rpx;
				margin: 6rpx 10rpx 0 0;
			}
			.title {
				flex: 1;
				font-size: 28rpx;
				font-weight: 600;
				color: #2d2e2f;
				margin-bottom: 16rpx;
			}
			.more {
				width: 160rpx;
				font-size: 24rpx;
				text-align: right;
				color: #2d2e2f;
				padding-right: 10rpx;
			}
			.action{
				line-height: 28rpx;
			}
		}
		
		.list {
			.item {
				// display: flex;
				border-bottom: 2rpx solid #f2f2f2;
				padding: 0 0 10rpx 0;
				margin-bottom: 10rpx;
				.Portraits{
					height: 55rpx;
					margin:0 0  22rpx 0;
					.avatar {
					display: inline-block;
					width: 55rpx;
					height: 55rpx;
					border-radius: 50%;
					overflow: hidden;
					image {
						width: 55rpx;
						height: 55rpx;
					}
				}
				.star {
					display: inline-block;
					width: 120rpx;
					height: 17rpx;
				    margin-left:18rpx;
				}
				}
				
				.info {
					flex: 1;
					padding-left: 4rpx;
					color: #666;
					.nickname {
						font-size: 24rpx;
						color: 24rpx;
					}
					.images {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						// flex-wrap: wrap;
						height: 200rpx;
						width: 700rpx;
						overflow-x:auto ;
						.image {
							position: relative;
							width: 180rpx;
							height: 180rpx;
							margin: 0 10rpx 20rpx 0;
							z-index: 2;
							image {
								width: 180rpx;
								height: 180rpx;
								border-radius: 20rpx;
							}
						}
					}
					.content {
						font-size: 24rpx;
						margin-bottom: 16rpx;
						color: #2d2e2f;
						line-height: 30rpx;
					}
					.time {
						font-size: 24rpx;
						color: #999;
					}
				}
				&:last-child {
					margin-bottom: 0;
					border-bottom: 0;
					padding-bottom: 0;
				}
			}
		}
	}
</style>
